<template>
  <div>
    <!-- 面包屑 -->
    <MBX l1="用户管理" l2="用户列表"></MBX>
    <!-- 卡片 -->
    <el-card class="xia">
      <el-button type="primary" @click="AddCate">添加分类</el-button>
      <!-- 表格 -->
      <el-table border :data="CateList" row-key="cat_id" class="xia">
        <el-table-column label="#" type="index">
          <template slot-scope="scope">
            <div>
              <!-- 添加一个下标  避免展开的时候序号一直往下排列 -->
              {{ scope.row.index }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" prop="cat_name"></el-table-column>
        <el-table-column label="是否有效">
          <template slot-scope="scope">
            <div>
              <i class="el-icon-success" v-show="!scope.row.cat_deleted"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="排序">
          <template slot-scope="scope">
            <div>
              <!-- 渲染一级 -->
              <el-button
                type="primary"
                size="mini"
                v-show="scope.row.cat_level == 0"
                >第一级</el-button
              >
              <!-- 渲染二级 -->
              <el-button
                type="success"
                v-show="scope.row.cat_level == 1"
                size="mini"
                >第二级</el-button
              >
              <!-- 渲染三级 -->
              <el-button
                type="warning"
                v-show="scope.row.cat_level == 2"
                size="mini"
                >第三级</el-button
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="EditCate(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="delCate(scope.row.cat_id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- // 添加弹框框 -->
    <el-dialog title="添加分类" :visible.sync="dialogFormVi">
      <el-form :model="formInputAdd">
        <el-form-item label="添加名称">
          <el-input v-model="formInputAdd.cat_name" class="in1"></el-input>、
          <!-- // 练级选择器 -->
          <el-form-item label="父级分类" class="xia">
            <el-cascader
              ref="twoCate"
              class="in1"
              v-model="check_id"
              :options="twoCate"
              :props="defaultProps"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVi = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
    <!-- // 编辑弹框 -->
    <el-dialog title="编辑分类" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称">
          <el-input v-model="form.cat_name" class="in1"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ShopCateDelListapi } from '@/http/api'
export default {
  name: '',
  components: {},
  data() {
    return {
      CateList: [], // 表格的数据
      // 添加需要传递的内容
      obj: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      EditId: 0, // 编辑id
      // 编辑表单的数据
      form: {
        cat_name: ''
      },
      total: 0,
      dialogFormVi: false, // 添加
      dialogFormVisible: false, // 编辑
      formInputAdd: {
        // 添加表单的数据
        cat_name: '',
        cat_id: 0,
        cat_level: 0
      },
      // 默认值
      defaultProps: {
        expandTrigger: 'hover',
        label: 'cat_name',
        children: 'children',
        value: 'cat_id'
      },
      twoCate: [], // 级联框的数据
      check_id: [] // 选中的几级id
    }
  },
  created() {
    this.getCate()
  },
  mounted() {},
  methods: {
    handleChange() {
      this.$refs.twoCate.dropDownVisible = false
    },
    async getCate() {
      const res = await this.$QHL.ShopCateListapi(this.obj)
      const { result, total } = res
      console.log(res)
      this.CateList = result
      this.total = total
      result.forEach((item, index) => {
        item.index = index + 1
      })
    },
    // 添加弹框
    async AddCate() {
      const res = await this.$QHL.ShopCateListapi({ type: 2 })
      this.twoCate = res
      this.dialogFormVi = true
    },
    add() {
      if (this.check_id.length !== 0) {
        this.formInputAdd.cat_id = this.check_id[this.check_id.length - 1]
        // this.formInputAdd.cat_id = this.check_id.at(-1)
      } else {
        this.formInputAdd.cat_id = 0
        this.formInputAdd.cat_level = 0
      }
      const res = this.$QHL.AddShopCate(this.formInputAdd)
      console.log(res)
      this.getCate()
      this.dialogFormVi = false
    },
    // 删除
    delCate(id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ShopCateDelListapi(id)
          .then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getCate()
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      })
    },
    // 编辑
    EditCate(row) {
      console.log(row)
      this.form.cat_name = row.cat_name
      this.EditId = row.cat_id
      this.dialogFormVisible = true
    },
    async editAdd() {
      await this.$QHL.ShopCateEditListapi({
        id: this.EditId,
        cat_name: this.form.cat_name
      })
      this.getCate()
      this.dialogFormVisible = false
    }
  }
}
</script>
<style scoped lang="scss">
i {
  color: greenyellow;
}
.in1 {
  width: 60%;
}
</style>
